<!--
 * @Author: liqi
 * @Date: 2022-09-07 09:08:22
 * @LastEditors: liqi
 * @LastEditTime: 2022-09-07 15:01:55
 * @Description: 
-->
<template>
  <div ref="container" style="height: 95%"></div>
</template>

<script>
import { Gauge } from "@antv/g2plot";
import {ref,onMounted} from 'vue';
export default {
  setup() {
    // 存放vue变量 ref()函数
    let container = ref(null);
    let percent = ref(0)
    let initChart = () => {
      // 图表实例存放
      const gauge = new Gauge(container.value, {
        percent: percent.value,
        range: {
          ticks: [0, 1 / 3, 2 / 3, 1],
          color: ["#F4664A", "#FAAD14", "#30BF78"],
        },
        indicator: {
          pointer: {
            style: {
              stroke: "#D0D0D0",
            },
          },
          pin: {
            style: {
              stroke: "#D0D0D0",
            },
          },
        },
        statistic: {
          content: {
            style: {
              fontSize: "36px",
              lineHeight: "36px",
            },
          },
        },
      });

      gauge.render();
      // 指针每隔0.1秒
      setInterval(()=>{
        if(percent.value < 0.75){
          percent.value += 0.01
          gauge.changeData(percent.value)
        }else{
          percent.value = 0.75
        }
      },100)
    };
    onMounted(initChart);
    return {
      container,
    };
  },
};
</script>

<style lang="scss">
</style>